<template>
	<view class="container">
		<view class="box">
			<image class="logo" src="../../static/soccer1.png" />
			<br />
			<text class="signin">登入</text>
			<text class="signin-text">使用账号密码登陆<br /></text>
			<input name="user" type="text" placeholder="账号" v-model="account">
			<br />
			<input name="pass" type="password" placeholder="密码" v-model="password" required>
			<button @click="signIn">登入</button>
			<text class="foot-txt">没有账号?<text class="bold" @click="signUp">现在就注册</text></text>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '../../tool/tool';
	import {
		ref
	} from 'vue';
	import axios from 'axios';

	export default {
		setup() {
			const account = ref('');
			const password = ref('');

			function signIn() {
				if (!account.value || !password.value) {
					alert("Please enter both username and password!");
					return;
				}

				uni.$emit('login', account.value);
				const app = getApp();
				console.log('Global account:', app.globalData.account);

				uni.request({
					url: baseUrl + "/UserAccount/login",
					method: "GET",
					data: {
						account: account.value,
						password: password.value,
					},
					success(res) {
						if (res.statusCode === 200 && res.data) {
							console.log('数据获取成功：', res.data);
							uni.switchTab({
								url: "/pages/index/index"
							});
						} else {
							alert("密码错误，请重新登录!");
						}
					},
					fail(err) {
						console.error("请求失败：", err);
						alert("网络错误，请稍后再试!");
					}
				});
			}

			function signUp() {
				uni.navigateTo({
					url: "/pages/register/register"
				});
			}

			return {
				account,
				password,
				signIn,
				signUp
			};
		}
	};
</script>

<style lang="scss" scoped>
	$charcoal: #444;
	$grey: #f3f4f4;
	$link: #3a8bbb;
	$pink: #ea4c89;
	$slate: #9da3a5;
	$white: #fff;

	@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600');
	$title-text: 'Work Sans', sans-serif;

	html,
	body {
		align-items: center;
		display: flex;
		height: 100vh;
		justify-content: center;
		margin: auto;
	}

	body {
		background: $grey;
		font-family: $title-text;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		width: 100vw;
	}

	.box {
		background: $white;
		border-radius: .625rem;
		box-shadow: 0 0 40px 0 rgba(66, 133, 244, 0.6);
		display: flex;
		flex-direction: column;
		height: 31.25rem;
		position: absolute;
		width: 18.75rem;
		align-items: center;
	}

	.logo,
	.signin,
	input,
	button,
	.foot-txt,
	.signin-row {
		margin: 0 auto;
		position: relative;
	}

	.logo {
		height: 3.125rem;
		margin-top: 1.875rem;
		width: 3.125rem;
	}

	p {
		color: $charcoal;
	}

	.signin {
		font: 600 1.8rem $title-text;
		padding: .17em;
	}

	.signin-row {
		display: flex;
		justify-content: space-around;
		margin: .625rem auto .3rem;
		padding: .625rem;
		width: 11rem;
	}

	.signin-row>.fab {
		color: $charcoal;
		font-size: 2rem;
		transition: all .15s ease-out;
		-webkit-transition: all .15s ease-out;
	}

	.signin-text {
		color: $slate;
		font: 500 .85rem $title-text;
		margin: 0;
		padding-top: 0.625rem;
		text-align: center;
	}

	.fab:hover {
		cursor: pointer;
	}

	.ic1:hover {
		color: #1da1f2;
	}

	.ic2:hover {
		color: #3b5998;
	}

	.ic3:hover {
		color: #4285f4;
	}

	input {
		-webkit-appearance: none;
		-moz-appearance: none;
		background: none;
		border: 0;
		border-bottom: 2px solid $slate;
		font: 500 .9rem $title-text, sans-serif;
		height: 2.15em;
		margin-top: .7em;
		transition: all .15s ease-out;
		-webkit-transition: all .15s ease-out;
		width: 80%;
	}

	input:focus {
		border-bottom: 2px solid $pink;
		outline: none;
	}

	::placeholder {
		color: $slate;
	}

	button {
		background: $link;
		border: 0;
		border-radius: 1.4em;
		color: $white;
		font: 1.1rem $title-text;
		margin: 1.7em auto .6em;
		outline: none;
		padding: .6em;
		transition: all .15s ease-out;
		-webkit-transition: all .15s ease-out;
		width: 80%;
	}

	button:hover {
		background: $charcoal;
		cursor: pointer;
	}

	button:focus {
		outline: none;
	}

	.foot-txt {
		color: $slate;
		font: 500 .85rem $title-text;
		padding: .3em;
	}

	.foot-txt:hover {
		cursor: pointer;
		text-decoration: underline;
	}

	.bold {
		font-weight: 600;
	}
</style>